<template>
<div>
  <div class="fillcontain" v-loading="dataListLoading">
    <bt-col-header title="因子配置"></bt-col-header>
    <div class="page-content">
      <el-form
        :model="dataForm"
        :rules="dataRule"
        @keyup.enter.native="getDataList()"
        class=""
        label-width="120px"
      >
        <div class="row">
            <el-form-item label="因子名称" class="col-md-6">
              <el-input
                v-model="dataForm.qualityName"
                placeholder="因子名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="因子标识" class="col-md-6">
              <el-input
                v-model="dataForm.qualityIdentify"
                placeholder="因子标识"
                clearable
              ></el-input>
            </el-form-item>
        </div>
        <div class="row contain-padding">
          <div class="col-md-12 text-center mt-2">
            <rich-button type="info" plain shape="capsule" icon="search" @click="getDataList()">查询</rich-button>
            <rich-button  shape="capsule" icon="quit" @click="resetData">重置</rich-button>
          </div>
        </div>
      </el-form>

      <div class="">
        <!-- 操作按钮 -->
        <div class="btn-padding left">
          <el-button :plain="true" type="info" icon="circle-plus" @click="addOrUpdateHandle()">新增</el-button>
        </div>
          

        <!-- 查询结果列表 -->
        <div class="table_container">
          <el-form ref="dataItemForm" :model="itemDataForm" :rules="itemRule">
            <!-- 列表 -->

            <el-table :data="itemDataForm.itemData" border style="width: 100%">
              <el-table-column
                type="index"
                header-align="center"
                width="50"
                label="序号"
              >
              </el-table-column>
              <el-table-column 
                prop="qualityName"
                header-align="center"
                align="center"
                label="因子名称"
              >
                <template slot-scope="scope">
                  <el-form-item
                  style="margin:0!important"
                    :rules="itemRule.qualityName"
                    :prop="'itemData.' + scope.$index + '.qualityName'"
                  >
                    <el-input
                      v-show="scope.row.show"
                      placeholder="请输入因子名称"
                      v-model="scope.row.qualityName"
                    ></el-input>
                  </el-form-item>
                  <span v-show="!scope.row.show">{{
                    scope.row.qualityName
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="qualityIdentify"
                header-align="center"
                align="center"
                label="因子标识"
              >
                <template slot-scope="scope">
                  <el-form-item
                    v-show="scope.row.show"
                    style="margin:0!important"
                    :prop="'itemData.' + scope.$index + '.qualityIdentify'"
                  >
                    <el-input
                      placeholder="请输入因子标识"
                      v-model="scope.row.qualityIdentify"
                    ></el-input>
                  </el-form-item>
                  <span v-show="!scope.row.show">{{
                    scope.row.qualityIdentify
                  }}</span>
                </template>
              </el-table-column>
              <!-- 暂时屏蔽 -->
              <!-- <el-table-column
                prop="creUserId"
                header-align="center"
                align="center"
                label="配置人"
              >
              </el-table-column> -->
              <el-table-column
                prop="creTime"
                header-align="center"
                align="center"
                label="配置时间"
              >
              </el-table-column>
              <el-table-column
                prop="isEffect"
                header-align="center"
                align="center"
                label="状态"
              >
                <template slot-scope="scope">
                  <!-- <el-select
                    v-show="scope.row.show"
                    v-model="scope.row.isEffect"
                    filterable
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in isEffects"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select> -->
                  <!-- v-show="!scope.row.show" -->
                  <span >{{
                    scope.row.isEffect | isEffectFilter
                  }}</span>
                </template>
              </el-table-column>

              <el-table-column header-align="center" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-if="isAuth('entity:view') && scope.row.show === false"
                    type="text"
                    size="small"
                    @click="editupdate(scope.row, 'edit')"
                    >编辑</el-button
                  >
                  <el-button
                    v-if="isAuth('entity:view') && scope.row.show === true"
                    type="text"
                    size="small"
                    @click="editupdate(scope.row, 'save')"
                    >保存</el-button
                  >
                  <el-button
                    v-if="isAuth('entity:view') && scope.row.isEffect === '1'"
                    type="text"
                    size="small"
                    @click="edit(scope.row)"
                    >禁用</el-button
                  >
                  <el-button
                    v-if="isAuth('entity:view') && scope.row.isEffect === '0'"
                    type="text"
                    size="small"
                    @click="edit(scope.row)"
                    >启用</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              class="float-right mt-2"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="page.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page.pageSize"
              :total="page.totalPage"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </el-form>
        </div>
      </div>

      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></add-or-update>
    </div>
    
  </div>
</div>
  
</template>

<script>
import {
  pageData,
  saveData,
  entityList,
  getData,
} from "@/api/baseConfig/divisor";
import AddOrUpdate from "./add-or-update";
import constant from "../../../../../api/constant";

export default {
  data() {
    var validateIdentify = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("标识不能为空"));
      } else {
        var patrn = /^[a-z][a-zA-Z0-9]{0,50}$/;
        // console.log(value);
        if (!patrn.test(value)) {
          callback(new Error("标识由字母和数字组成，且首字母为小写长度小于50"));
        } else {
          callback();
        }
      }
    };
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("名称不能为空"));
      } else {
        var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
        var regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;

        if (regEn.test(value) || regCn.test(value) || value.length >= 50) {
          callback(new Error("名称不能包含特殊字符，且长度小于50"));
        } else {
          callback();
        }
      }
    };
    return {
      dataForm: {
        qualityName: "",
        qualityIdentify: "",
      },
      dataRule: {
        qualityName: [{ validator: validateName, trigger: "blur" }],
        qualityIdentify: [{ validator: validateIdentify, trigger: "blur" }],
      },
      itemRule: {
        qualityName: [{ validator: validateName, trigger: "blur" }],
        qualityIdentify: [{ validator: validateIdentify, trigger: "blur" }],
        qualityType: [
          { required: true, message: "属性类型不能为空", trigger: "change" },
        ],
      },
      dataList: [],
      itemDataForm: {
        itemData: [],
      },
      entitys: [],
      qualityTypes: constant.ruleConfig.entityItemType,
      isEffects: constant.ruleConfig.isEffects,
      dataListLoading: false,
      addOrUpdateVisible: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      },
    };
  },
  components: {
    AddOrUpdate,
  },
  activated() {
    this.getDataList();
  },
  created() {
    this.getEntityCls();
  },
  methods: {
    changeEntityqualityType(item, row) {
      // console.log(item, row);
      if (item.value === "List") {
        row.itemObjType = "3";
      } else {
        row.itemObjType = "1";
      }
    },
    changeEntityItem(item, row) {
      // console.log(item, row);
      row.label = item.label;
      let list = this.itemDataForm.itemData.filter(
        (i) => i.itemCls === item.pkgName
      );
      if (list && list.length > 1) {
        row.itemCls = "";
        this.$message.error("因子标识不能重复");
      }
    },
    editupdate(ele, ele2) {
      if (ele.isEffect == '0') {
        this.$message.error('该条数据已失效，无法编辑！');
      } else {
        this.iseditupdate(ele, ele2);
      }
    },
    edit(row) {
      // console.log(row);
      let data = JSON.parse(JSON.stringify(row))
          if (row.isEffect === "0") {
              data.isEffect = "1";
            } else {
              data.isEffect = "0";
            }
      let param = {
        isEffect: data.isEffect,
        qualityId: data.qualityId,
      };
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      getData(JSON.stringify(param)).then((res) => {
        // console.log(res.data);
        if (res.data.resultCode == '0') {    
          this.getDataList();
        } else {
       this.$message.error(res.data.resultMsg);   
        }
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
    resetData() {
      this.dataForm.qualityName = "";
      this.dataForm.qualityIdentify = "";
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      let params = {
        pageNumber: this.page.pageIndex,
        pageSize: this.page.pageSize,
        qualityName: this.dataForm.qualityName,
        qualityIdentify: this.dataForm.qualityIdentify,
      };
      pageData(params)
        .then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          res.data.data.list.forEach((element) => {
            element.show = false;
          });
          this.itemDataForm.itemData = res.data.data.list;
          this.page.totalPage = res.data.data.totalCount;
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
    // 是否编辑
    iseditupdate(ele, ele2) {
      // console.log(ele, ele2,'ele, ele2');
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      saveData(JSON.stringify(ele)).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        // console.log(res.data);

        if (res.data && res.data.data && res.data.data.length || res.data.data == null) {
          this.$message.error(res.data.resultMsg);
        } else {
          ele.show = !ele.show;
          if (ele2 == 'save') {
            this.getDataList();
          }
        }
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 获取实体类列表
    getEntityCls() {
      entityList({}).then((res) => {
        this.entitys = [];
        if (res.data.data) {
          res.data.data.forEach((item) => {
            item["label"] = item.entityIdentify + "-" + item.entityName;
            this.entitys.push(item);
          });
          let str = {
            pkgName: "java.lang.String",
            label: "String",
          };
          this.entitys.push(str);
        }
      });
    },
  },
  filters: {
    isEffectFilter: function (value) {
      let label = "";
      if (value === "0") {
        label = "失效";
      } else if (value === "1") {
        label = "有效";
      }
      return label;
    },
  },
};
</script>
<style lang="less">
</style>
